import { createRouter, createWebHistory } from 'vue-router';
import LoginView from '../views/LoginView.vue';

const router = createRouter({
  // 配置使用history模式
  history: createWebHistory(import.meta.env.BASE_URL),
  // 定义路由规则
  routes: [
    {
      path: '/',
      name: 'login',
      component: LoginView, // 登录页面
    },
    {
      path: '/homeView',
      name: 'homeView',
      component: () => import('../views/HomeView.vue'), // 首页
      children: [
        {
          path: 'liveRoad',
          name: 'liveRoad',
          component: () => import('../views/LiveRoad.vue'), //实时路况页面
        },
        {
          path: 'videoMonitor',
          name: 'videoMonitor',
          component: () => import('../views/VideoMonitor.vue'), //视频监控页面
        },
        {
          path: 'addEvent',
          name: 'addEvent',
          component: () => import('../views/AddEvent.vue'), //事件添加页面
        },
        {
          path: 'searchEvent',
          name: 'searchEvent',
          component: () => import('../views/SearchEvent.vue'), //事件查询页面
        },
        {
          path: 'updateEvent',
          name: 'updateEvent',
          component: () => import('../views/UpdateEvent.vue'), //事件更新页面
        },
        {
          path: 'publishAnnouncement',
          name: 'publishAnnouncement',
          component: () => import('../views/PublishAnnouncement.vue'), //发布公告页面
        },
        {
          path: 'roadInfo',
          name: 'roadInfo',
          component: () => import('../views/RoadInfo.vue'), //路况信息页面
        },
        {
          path: 'viewAnnouncement',
          name: 'viewAnnouncement',
          component: () => import('../views/ViewAnnouncement.vue'), //查看公告页面
        },
        {
          path: 'reportRoadCondition',
          name: 'reportRoadCondition',
          component: () => import('../views/ReportRoadCondition.vue'), //报告路况页面
        },
        {
          path: 'toolBox/:measureType?', //可以同时匹配/toolBox和/toolBox/:measureType,?表示0个或1个参数
          name: 'toolBox',
          component: () => import('../views/ToolBox.vue'), //工具箱页面
        },
        {
          path: 'userManage',
          name: 'userManage',
          component: () => import('../views/UserManage.vue'), //用户管理页面
        },
      ],
    },
  ],
});

// 获取 Cookie 的函数
function getCookie(name) {
  const cookieString = document.cookie;
  const [key, value] = cookieString.split('=');

  /*
    检查 cookie 名称是否匹配并返回解码后的值
    当从 document.cookie 或其他 URI 中获取数据时，该数据可能会被编码
    使用 decodeURIComponent 读取到的是解码后的、可读的字符串，而不是含有编码符号的文本 
  */
  return key === name ? decodeURIComponent(value) : null;
}

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const token = getCookie('token'); // 从 cookie 中获取 token

  // 如果没有找到 token 且不是前往登录页面，则提示用户登录并重定向到登录页面
  if (!token && to.name !== 'login') {
    alert('请先登录');
    next({ name: 'login' });
  } else {
    // 如果有 token 或者目标页面是登录页面，则允许通过
    next();
  }
});

export default router;
